import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Row,Col,Card,Button,Pagination,Select,message,Popconfirm,Input,Modal} from 'antd';
import styles from './index.less';
const Option = Select.Option;
const { Meta } = Card;

const Pages = ({ category, dispatch, loading }) => {
    let {record,visible} = category;
    return <div className={styles.container}>
        <Button onClick={()=>{
            dispatch({type:'category/save',payload:{visible:true,title_name:'',title_remark:'',title_type:''}});
        }} type='primary'>+新建演练记录表</Button>
        <Modal
            title={record.id?"修改演练记录表":'新建演练记录表'}
            visible={visible}
            confirmLoading={loading.global}
            onOk={()=>{
                let {title_name,title_remark,title_type} = category;
                if(title_name && title_remark && title_type){
                    dispatch({type:'category/postCategory',payload:{
                        title_name:title_name,
                        title_type:title_type,
                        title_remark:title_remark,
                    }});
                }else{
                    message.error('请填写完整！');
                }
            }}
            onCancel={()=>dispatch({type:"category/save",payload:{visible:false,record:{}}})}
        >
            <Row>
                <Col span={6}><span><span style={{color:'red'}}>*</span>题目名称:</span></Col>
                <Col span={14}>
                    <Input style={{width: 300, marginBottom: 10, marginTop: -4}}
                        onChange={e => dispatch({type:'category/save',payload:{title_name:e.target.value}})}
                        value={category.title_name}
                        placeholder="题目名称"/>
                </Col>
                <Col span={6}><span><span style={{color:'red'}}>*</span>题目类型:</span></Col>
                <Col span={14}>
                    <Select value={category.title_type || undefined} placeholder="题目类型" style={{width: 300, marginBottom: 10, marginTop: -4}}
                        onChange={value=>{
                            dispatch({type:'category/save',payload:{title_type:value}});
                        }}>
                        <Option value="1">实际演练</Option>
                        <Option value="2">桌面演练</Option>
                    </Select>
                </Col>
                <Col span={6}><span><span style={{color:'red'}}>*</span>备注信息:</span></Col>
                <Col span={14}>
                    <Input style={{width: 300, marginBottom: 10, marginTop: -4}}
                        onChange={e => dispatch({type:'category/save',payload:{title_remark:e.target.value}})}
                        value={category.title_remark}
                        placeholder="备注信息"/>
                </Col>
            </Row>
        </Modal>
        <Row>
            {
                category.getCategoryData && category.getCategoryData.map(item=>{
                    return <Col onClick={()=>{
                        dispatch({type:'app/goToPath',payload:'categorymanagement_list'});
                        localStorage.setItem('id',item.id);
                    }} style={{marginTop:10}} span={6} key={item.id}><Card
                            hoverable
                            style={{ width: '98%' }}
                            cover={<img style={{height:'98%'}} alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />}
                        >
                            <Meta
                                title={`${item.title_name}(${item.title_type==1?"实际演练":"桌面演练"})`}
                                description={item.title_remark}
                            />
                        </Card></Col>;
                })
            }
        </Row>
        <Pagination current={category.pages} showTotal={total => `共计 ${total} 条`}
            style={{float: 'right', margin: 10}} size="small" total={category.total}
            onChange={pages => { !loading.global && dispatch({type:'check/save',payload:{pages:pages}});}}/>

    </div>;
};

Pages.propTypes = {
    category: PropTypes.object,
    loading: PropTypes.object,
    dispatch: PropTypes.func,
};

export default connect(({ category, loading }) => ({ category, loading }))(Pages);
